<script setup>
import subAppInfo from '@/constant/index'
import { computed } from 'vue';
import { Back } from '@element-plus/icons-vue'

const { protocol, hostname } = window.location
const url = computed(() => {
  if (import.meta.env.DEV) {
    return `${protocol}//${hostname}:${subAppInfo.devServer.port}`
  }
  // 生产环境
  return 'http://exmaple.site'
})

const data = {
  path: ':data 方式向子应用发送数据'
}

const handleDataChange = (data) => {
  console.log('---[data from sub app by @change]---', data)
}

const created = () => {
  console.log('micro-app元素被创建')
}
const beforemount = () => {
  console.log('即将被渲染')
}
const mounted = () => {
  console.log('已经渲染完成')
}
const unmount = () => {
  console.log('已经卸载')
  // 移除所有监听事件
  window[`eventCenterFor${subAppInfo.name}`].clearDataListener()
}
const error = () => {
  console.log('渲染出错')
}
</script>

<template>
  <div>
    <RouterLink
      :to="{
        path: '/'
      }"
    >
      <el-icon><Back /></el-icon>
      返回主应用
    </RouterLink>
    <el-divider />
    <!-- <h1>子应用</h1> -->
    <!-- 
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`

      子应用是vite应用的话，需要关闭沙箱，并使用内联script
      inline 使用内联script模式
      disableSandbox 关闭沙箱
     -->
    <micro-app
      :name='subAppInfo.name'
      :url='url'
      :data="data"
      inline
      disableSandbox
      @datachange='handleDataChange'
      @created='created'
      @beforemount='beforemount'
      @mounted='mounted'
      @unmount='unmount'
      @error='error'
    ></micro-app>
  </div>
</template>
